<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { meetingStore } from "@/stores/frontData/he/main";

const store = meetingStore();
const student = store.student;

const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  sizeList: ["small", "", "large"] as const,
});

const { circleUrl, sizeList } = toRefs(state);
</script>
<!--个人信息-->
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <h3 class="Title">个人信息</h3>
        </el-header>
        <el-main class="main">
          <el-row class="demo-avatar demo-basic touxiang">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="100" :src="student.image" />
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="wz">
            <div>
              <span class="wz1">{{ student.username }}</span>
              <button class="btn">修改</button>
            </div>
            <div class="wz2">
              <span>开通会员全站视频有优惠，更有更多福利等你来拿 </span>
              <a href="" class="wz3">开通会员></a>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.Title {
  color: #23b8ff;
  font-weight: bold;
}
.touxiang {
  float: left;
}
.wz {
  height: 100px;
  font-size: 13px;
  margin-left: 140px;
}
.wz1 {
  font-size: 16px;
}
.btn {
  border: none;
  background-color: white;
  color: #23b8ff;
}
.wz2 {
  margin-top: 30px;
  background-color: #e6e6ec;
}
.wz3 {
  color: #ec962b;
}
</style>
